<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="100">
          <Collapse value="0">
            <Panel>
              基础配置
              <div slot="content">
                <FormItem label="多选模式">
                  <i-switch v-model="multi" size="small"></i-switch>
                </FormItem>
                <FormItem label="小于10补零">
                  <Tooltip content="当选中时触发执行脚本时，获取的数值小于10时，自动为其数字前面补0" max-width="200" placement="left">
                    <i-switch v-model="zero" size="small"></i-switch>
                  </Tooltip>
                </FormItem>
              </div>
            </Panel>
            <Panel>
              样式配置
              <div slot="content">
                <FormItem label="默认字体颜色">
                  <PnColorPicker size="small" v-model="styleObj.defaultColor" alpha recommend/>
                </FormItem>
                <FormItem label="禁用字体颜色">
                  <PnColorPicker size="small" v-model="styleObj.disabledColor" alpha recommend/>
                </FormItem>
                <FormItem label="星期文字字号">
                  <InputNumber size="small" v-model="styleObj.weekFontSize" :max="35" :min="12" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="主体文字字号">
                  <InputNumber size="small" v-model="styleObj.mainFontSize" :max="35" :min="12" :active-change="false"></InputNumber>
                </FormItem>
                <FormItemPanel title="选中项">
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="styleObj.selectedColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="背景色">
                    <PnColorPicker size="small" v-model="styleObj.selectedBackgroundColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
                <FormItemPanel title="鼠标划入">
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="styleObj.hoverColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="背景色">
                    <PnColorPicker size="small" v-model="styleObj.hoverBackgroundColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
              </div>
            </Panel>
          </Collapse>

        </Form>

      </TabPane>
<!--      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="PnCalendarComp"></DatasourceState>
      </TabPane>-->
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <Alert show-icon>
              日历组件实例【this.calendar】
            </Alert>
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
          <FormItemPanel title="选中时执行脚本">
            <InteractionSender :interactionKey="'itemSelect'" :canAddFieldsMap="false"></InteractionSender>
            <Alert show-icon style="padding-right: 8px; text-align: justify;">
              通过value可得到当前选中日期值
            </Alert>
            <CodeEditor v-model="selectCallbackCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'PnCalendarCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        multi: 'component.compConfigData.multi',
        range: 'component.compConfigData.range',
        lunar: 'component.compConfigData.lunar',
        zero: 'component.compConfigData.zero',
        styleObj: 'component.compConfigData.styleObj',
        selectCallbackCode: 'component.compConfigData.selectCallbackCode',

      })
    }
  }
</script>

<style scoped>

</style>
